<template>
    <div class="fullScreen">
        <m-header :msg="'登录'"></m-header>
        <div class="scroll-box">
            <!-- 请输入用户名 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_yh mar-r-5"></div>
                <div class="flex-f1 bor-b-g">
                    <input v-model="username" class="input-ol-n wd-fh" placeholder="请输入用户名"/>
                </div>
                <div class="flex-bap psw-but" @click="cancel()"> 
                    <div class="iconSize-075 icon_delet"></div>
                </div>
            </div>
            <!-- 请输入登录密码 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_mm mar-r-5"></div>
                <div class="flex-f1 bor-b-g">
                    <input v-model="password" class="input-ol-n wd-fh" :type="inputType" placeholder="请输入登录密码"/>
                </div>
                <div class="flex-bap psw-but" @click="togPsw()"> 
                    <div :class="{
                    'psw-look' : !psdStatuas,
                    'psw-nolook' : psdStatuas,
                    }"></div>
                </div>
            </div>
            <!-- 登录 -->
            <div class="submit-btn mar-login" @click="login">登录</div>
            <!-- 选择是否记住密码 -->
            <div class="flex-box flex-ac tx-s-12 tx-c-666 jzmm" @click="remember">
                <div class="iconSize-075" :class="{
                    'icon_nojzmm' : !rememberStatuas,
                    'icon_jzmm' : rememberStatuas,
                }"></div>&nbsp;&nbsp;记住密码，下次自动登录
            </div>
            <!-- 注册 -->
            <div class="cancel-btn" @click="register">没有账号？立即注册</div>
            <div class="tx-c tx-s-12 tx-c-666" @click="trouble">登录遇到问题？</div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import Trans from '../../common/js/eventTrans'
import { loginSend } from '../../common/js/axiosUtil'
import { setCookie, getCookie } from '../../common/js/cookie'
import { isDefine, getClass } from '../../common/js/common'
export default {
    data () {
        return {
            username : '',
            password : '',
            psdStatuas : false,
            inputType : 'password',
            rememberStatuas : false,
            serviceQQ : this.$store.state.serviceQQ
        }
    },
    mounted () {
        let userNamePsw = JSON.parse(getCookie('userNamePsw'))
        if(isDefine(userNamePsw)){
            this.username = userNamePsw.username
            this.password = userNamePsw.password
        }
    },
    methods: {
        togPsw () {
            // 切换显示隐藏密码
            this.psdStatuas = !this.psdStatuas
            this.inputType = this.inputType === 'password' ? 'text' : 'password'
        },
        cancel () {
            // 清空用户名
            this.username = ''
            this.password = ''
        },
        remember () {
            // 切换是否记住密码
            this.rememberStatuas = !this.rememberStatuas
        },
        register () {
            // 跳转登录
            this.$router.push('/register')
        },
        trouble () {
            const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
            this.$vux.confirm.show({
                // 组件除show外的属性
                content: '需要帮助请联系QQ客服<br/>'+ this.serviceQQ,
                cancelText: '取消',
                confirmText: '复制QQ',
                hideOnBlur: true,
                onCancel () {
                },
                onConfirm () {
                    const input = document.createElement("input")
                    input.value = _this.serviceQQ
                    document.body.appendChild(input)
                    input.select()
                    input.setSelectionRange(0, input.value.length), document.execCommand('Copy')
                    document.body.removeChild(input)
                }
            })
        }, 
        login (){
            // 通过ClassName获取需填项
            const arr = getClass("input-ol-n")
            // 判断各项是否已填写
            if(this.$checkWrite(arr)){
                return
            }
            this.$toast('登录中...', 1000000)
            let userNamePsw = {'username': this.username, 'password': this.password}
            let params = this.$params(0)
            params.append('username', this.username)
            params.append('password', this.md5(this.password))
            loginSend(params)
            .then((response)=> { 
                this.$toastClose()
                if(response.data.code == "200" && response.data.msg == '成功'){
                    this.$toast('登录成功', 2000)
                    const {data} = response.data
                    if(this.rememberStatuas){
                        // 选中记住密码 用户信息缓存一天
                        setCookie('userInfo', JSON.stringify(data), 1)
                        // 用户名密码缓存一天
                        setCookie('userNamePsw', JSON.stringify(userNamePsw), 1)
                    }else{
                        // 未选中记住密码 用户信息当次登录有效
                        sessionStorage.setItem('userInfo', JSON.stringify(data))
                    } 
                    // 更新store数据
                    this.$store.commit('SET_USERINFO') 
                    this.$store.state.loginAlert = true
                    this.$store.state.bindingName = ''
                    // 刷新首页查询姓名方法
                    Trans.$emit('checkUserkName')
                    
                    // 跳转购彩中心
                    let _this = this
                    setTimeout(function(){
                        _this.$toastClose()
                        _this.$router.push('/recommend') 
                    }, 1000)
                }else{
                    if(response.data.msg){
                        this.$alert(response.data.msg)
                    }else{
                        this.$toast('请求超时', 2000)
                    }
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            });
        }
    },
    components: {
        MHeader
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.scroll-box
    position: fixed
    width: 100%
    top: 2.75rem
    bottom: 0
    background: white
    font-size: $fonts-14
    padding-top: .5rem
    overflow: auto
.scroll-box::-webkit-scrollbar
    display: none
.line-box
    padding: .5rem 1rem
    line-height: 2rem
.psw-but
    height : 2rem
    width : 2rem
    border-bottom : 1px solid $color-f0
.mar-login
    margin : 4rem 1rem 0 1rem
.jzmm
    margin : 0 1rem
    padding : .75rem 0 .25rem 0
.inp_copy
    opacity: 0
    position: absolute
</style>

